{% extends 'layout.html' %}
{% load permission %}


{% block content %}
    {% add_permission request 'customer_add' %}
    <!--
    <a href="{% url 'customer_add' %}" class="btn btn-primary">添加 <span
            class="glyphicon glyphicon-plus-sign"></span>
    </a>
    -->

    <div class="col-lg-3" style="float:right;">
        <form action="" method="get">
            <div class="input-group">
                <input name="keyword" type="text" class="form-control" placeholder="Search for..."
                       value="{{ keyword }}">
                <span class="input-group-btn">
                    <button class="btn btn-default glyphicon glyphicon-search" type="submit"></button>
                </span>
            </div><!-- /input-group -->
        </form>
    </div><!-- /.col-lg-6 -->

    <hr>
    <div style="padding: 0 20px 0 20px">
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <td>id</td>
                <td>username</td>
                <td>mobile</td>
                <td>balance</td>
                <td>level</td>
                <td>date</td>
                <td>creator</td>
                <td>order</td>
                <td>operation</td>
                {% if request|table_permission:"customer_edit,customer_delete" %}
                    <td>operation</td>
                {% endif %}
            </tr>
            </thead>
            <tbody>
            {% for foo in show_data %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ foo.username }}</td>
                    <td>{{ foo.mobile }}</td>
                    <td>{{ foo.balance }}</td>
                    <td>{{ foo.level.title }}</td>
                    <td>{{ foo.create_date|date:"Y-m-d H:i:s" }}</td>
                    <td>{{ foo.creator.username }}</td>
                    <td>
                        <a href="{% url 'customer_list_order' pk=foo.id %}" class="btn btn btn-link btn-sm">订单管理</a>
                    </td>
                    <td>
                        {% reset_permission request 'customer_reset' foo.id %}
                        <!--
                        <a href="{% url 'customer_reset' pk=foo.id %}" class="btn btn-link btn-sm">重置密码</a>
                        -->
                    </td>
                    {% if request|table_permission:"customer_edit,customer_delete" %}
                        <td>
                            {% edit_permission request 'customer_edit' foo.id %}
                            {% delete_permission request 'customer_delete' nid=foo.id %}

                            <!--
                            <a href="{% url 'customer_edit' pk=foo.id %}?{{ request.GET.urlencode }}"
                               class="btn btn-info btn-sm">编辑</a>
                            <a class="btn btn-danger btn-sm deleteCustomer" nid="{{ foo.id }}">删除</a>
                            -->
                            <span class="error_msg" style="color: red"></span>
                        </td>
                    {% endif %}

                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <h3 class="h3" style="color: #8686e5; text-align: center;">{{ errors }}</h3>
    <ul class="pagination" style="padding: 0 20px 0 20px">
        {{ pager_string }}
    </ul>

    <!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                    <h4>是否确定要删除?</h4>
                    <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor
                        ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                    <p>
                        <button type="button" class="btn btn-danger" id="modalAjax">确 定</button>
                        <button type="button" class="btn btn-default" id="modalCancel">取 消</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            // console.log("{{ request.GET.urlencode }}")  // 获取当前url携带的参数
            NID = null
            // 绑定显示事件
            $('.deletePolicy').click(function () {
                NID = $(this).attr('nid')
                $('#deleteModal').modal('show')
            })

            // 绑定取消事件
            $('#modalCancel').click(function () {
                $('#deleteModal').modal('hide')
            })

            // 发送ajax请求
            $('#modalAjax').click(function () {
                sendAjaxEvent()
            })
        })

        function sendAjaxEvent() {
            $(".deleteCustomer").next().empty()
            $.ajax({
                url: "{% url 'customer_delete' %}",
                type: 'get',
                dataType: 'json',
                data: {"id": NID},
                success: function (data) {
                    $('#deleteModal').modal('hide')
                    if (data.status) {
                        location.reload('{% url 'customer_list' %}')
                    } else {
                        $("[nid=" + NID + "]").next().text(data.detail)
                    }
                }
            })
        }
    </script>
{% endblock %}